import React from "react";
import Dialog from "material-ui/Dialog";
import FlatButton from "material-ui/FlatButton";
import TextField from 'material-ui/TextField';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import Checkbox from 'material-ui/Checkbox';

const styles = {
  judgeObjectSelect: {
    display: "flex",
    alignItems: "center"
  },
  addForm: {
    display: "flex",
    flexWrap: "wrap"
  },
  addFormLeft: {
    display: "flex",
    flexDirection: "column"
  },
  addFormRight: {
    maxWidth: 250,
  },
  checkbox: {
    width: "200px",
    height: "50px"
  }
};


export default class AddJudgeDialog extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      tenderName: '',
      orgName: '',
      judgeName: '',
      projectName: '',
      judgeObject: "施工单位",
      judgeClassify: ['内业考核', '外业通用', '公路工程']
    };
  }


  judgeObjectClassify = {
    "施工单位": ['内业考核', '外业通用', '公路工程', '水路工程'],
    "监理单位": ['监理单位考核评价'],
    "建设单位": ['建设单位考核评价']
  };


  selectJudgeClassify = (name) => {
    let { judgeClassify } = { ...this.state };
    if (judgeClassify.indexOf(name) === -1) {
      judgeClassify.push(name);
    } else {
      judgeClassify.splice(judgeClassify.indexOf(name), 1);
    }
    this.setState({ judgeClassify });
  };
  handleChangeJudgeObject = (event, index, value) => {

    let judgeClassify = this.judgeObjectClassify[value];
    this.setState({ tenderName: "", orgName: "", judgeObject: value, judgeClassify });
  };

  hasSelect = (classifyName) => {
    for (let index in this.state.judgeClassify) {
      if (this.state.judgeClassify[index] === classifyName) {
        return true
      }
    }
    return false;
  };

  inputChange = (e) => {
    let oldState = { ...this.state };
    oldState[e.target.name] = e.target.value;
    this.setState(oldState);
  };

  _submit = () => {
    const {
      tenderName,
      orgName,
      judgeName,
      projectName,
      judgeObject,
      judgeClassify
    } = { ...this.state };

    if (judgeName === '') {
      this.props.handlePop("考核名称不能为空");
      return;
    }

    if (projectName === '') {
      this.props.handlePop("考核项目名称不能为空");
      return;
    }
    if (orgName === '') {

      this.props.handlePop(judgeObject === '施工单位' ? "施工单位名称不能为空" :
        judgeObject === '监理单位' ? "监理单位名称不能为空" :
          judgeObject === '建设单位' ? "建设单位名称不能为空" : "");
      return;
    }
    if (tenderName === '' && judgeObject !== '建设单位') {

      this.props.handlePop(judgeObject === '施工单位' ? "标段名称不能为空" :
        judgeObject === '监理单位' ? "合同段不能为空" : "");
      return;
    }
    if (judgeClassify.length <= 0) {
      this.props.handlePop("最少选择一项考核项");
      return;
    }

    this.props.addJudge(this.state);
  };

  render() {
    const actions = [
      <FlatButton
        label="取消"
        primary={true}
        onClick={this.props.toggleShow}
      />,
      <FlatButton
        label="提交"
        primary={true}
        onClick={this._submit}
      />,
    ];
    let judgeClassify = [];
    if (this.state.judgeObject === "施工单位") {
      judgeClassify = this.judgeObjectClassify[this.state.judgeObject];
    }
    return (
      <div>
        <Dialog
          title="新增考核"
          actions={actions}
          modal={true}
          open={this.props.open}
        >
          <div style={styles.judgeObjectSelect}>
            <span>考核对象</span>
            <DropDownMenu value={this.state.judgeObject} onChange={this.handleChangeJudgeObject}>
              <MenuItem value={"施工单位"} primaryText="施工单位"/>
              <MenuItem value={"监理单位"} primaryText="监理单位"/>
              <MenuItem value={"建设单位"} primaryText="建设单位"/>
            </DropDownMenu>
          </div>
          <div style={styles.addForm}>
            <div style={styles.addFormLeft}>
              <TextField fullWidth={true}
                         hintText="例：xx单位平安工地考核" name="judgeName" value={this.state.judgeName}
                         floatingLabelText="考核名称" onChange={this.inputChange}
              />
              <TextField
                hintText="请输入" name="projectName" value={this.state.projectName}
                floatingLabelText="项目名称" onChange={this.inputChange}
              />
              <TextField
                hintText="请输入" name="orgName" value={this.state.orgName}
                floatingLabelText={
                  this.state.judgeObject === '施工单位' ? "施工单位名称" :
                    this.state.judgeObject === '监理单位' ? "监理单位名称" :
                      this.state.judgeObject === '建设单位' ? "建设单位名称" : ""
                }
                onChange={this.inputChange}
              />
              {
                this.state.judgeObject !== '建设单位' ? <TextField
                  hintText="请输入" name="tenderName" value={this.state.tenderName}
                  floatingLabelText={
                    this.state.judgeObject === '施工单位' ? "标段名称" :
                      this.state.judgeObject === '监理单位' ? "合同段" : ""
                  } onChange={this.inputChange}
                /> : ""
              }

            </div>
            <div style={styles.addFormRight}>
              {judgeClassify.map(
                name =>

                  <Checkbox key={name} label={name} checked={this.hasSelect(name)}
                            onCheck={() => this.selectJudgeClassify(name)} labelStyle={styles.checkbox}/>
              )}
            </div>
          </div>
        </Dialog>
      </div>
    );
  }
}

